<template>
  <div class="container">
    <div class="kinds">
      <div>
        <span class="text">地区：</span>
        <ul>
          <!--类名根据是否是当前选中的项决定-->
          <li
              v-for="v in areaList"
              :key="v.value"
              :class="queryParams.area ===v.value? 'active-kind' :''"
              @click="handleClick(v.value,1)">
            {{ v.label }}
          </li>
        </ul>
      </div>
      <div>
        <span class="text">类型：</span>
        <ul>
          <!--类名根据是否是当前选中的项决定-->
          <li
              v-for="v in typeList"
              :key="v.value"
              :class="queryParams.type ===v.value? 'active-kind' :''"
              @click="handleClick(v.value,2)">
            {{ v.label }}
          </li>
        </ul>
      </div>
      <div>
        <span class="text">排序：</span>
        <ul>
          <li
              v-for="v in order"
              :key="v.value"
              :class="queryParams.order ===v.value? 'active-kind' :''"
              @click="handleClick(v.value,3)">
            {{ v.label }}
          </li>
        </ul>
      </div>

    </div>
    <div class="mt20">
      <MvCard :dropdownRefresh="true" :loading="loading" :mvList="mvList" type="mv" @handleJump='handleJump'
              @loadData="loadData">

      </MvCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue"
import {useRouter} from 'vue-router'
import MvCard from "@/components/Card/MvCard/index.vue"
import {mvAll} from "../../../api/mv";

let loading = ref(false)

const router = useRouter()
const areaList = reactive([{  //地区分类
  label: '全部',
  value: '全部'
}, {
  label: '内地',
  value: '内地'
}, {
  label: '港台',
  value: '港台'
}, {
  label: '欧美',
  value: '欧美'
}, {
  label: '韩国',
  value: '韩国'
}, {
  label: '日本',
  value: '日本'
}])
//种类选项数据
const typeList = reactive([{
  label: '全部',
  value: '全部'
}, {
  label: '官方版',
  value: '官方版'
}, {
  label: '原声',
  value: '原声'
}, {
  label: '现场版',
  value: '现场版'
}, {
  label: '网易出品',
  value: '网易出品'
}])
let order = ref([
  {
    label: '上升最快',
    value: '上升最快'
  }, {
    label: '最热',
    value: '最热'
  }, {
    label: '最新',
    value: '最新'
  },
])

let mvList = ref([])
let queryParams = reactive({
  type: '全部', //类型
  area: '全部', //地区
  order: '上升最快', //排序
  limit: 30,
  offset: 0//   (页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
})


//加载更多数据
const loadData = () => {
  if (mvList.value.length > 0) {
    queryParams.offset += 30
  }
  getMvList()
}
//选择类型
const handleClick = (v: string, type: 1 | 2 | 3) => {
  queryParams.offset = 0
  if (type === 1) { //重选了地区语种
    queryParams.area = v
  } else if (type === 2) { //重选了分类
    queryParams.type = v
  } else { //重选了排序
    queryParams.order = v
  }
  mvList.value = []
  getMvList()
}
//获得列表
const getMvList = () => {
  loading.value = true
  mvAll(queryParams).then((res: any) => {
    if (res.code === 200) {
      loading.value = false
      mvList.value.push(...res.data)
    }
  })
}
// getMvList()


</script>
<style>

</style>
<style lang="less" scoped>
.container {
  //margin-left: -10px;
}

:deep(.some-container), :deep(.some-container ul) {
  width: 100% !important;
}

:deep(.some-container li) {
  font-size: 14px !important;
  padding: 0 20px !important;
}

.kinds {
  margin-bottom: 0;

  .active-kind {
    background-color: @shallowTheme;
    color: @pinkFont;
    border-radius: 30px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      margin-top: 3px;
      cursor: pointer;
      max-width: 86px;
      .long-text;
      font-size: 13px;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
    }
  }
}

.target {
  margin-top: -70px;
}

.kinds > div {
  margin-bottom: 0;
}
</style>
